<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易BBS</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        #commentForm { margin-bottom: 30px; }
        .comment { border: 1px solid #ddd; padding: 15px; margin-top: 10px; }
        .comment-header { display: flex; justify-content: space-between; }
        .reply-form { margin-left: 30px; border-left: 2px dashed #ccc; padding-left: 15px; }
        .reply { margin-left: 30px; background-color: #f9f9f9; }
    </style>
</head>
<body>
    <h1>留言板</h1>
    
    <div id="commentForm">
        <input type="text" id="authorInput" placeholder="你的名字" style="width: 200px;">
        <input type="text" id="contentInput" placeholder="说说你的想法..." style="flex-grow: 1; margin-left: 10px;">
        <button onclick="submitComment()">发表</button>
    </div>
    
    <div id="commentList"></div>

    <script>
        let currentComments = [];

        // 初始化加载评论
        async function fetchComments() {
            const res = await fetch('/api/comments');
            currentComments = await res.json();
            renderComments(currentComments);
        }
        
        async function submitComment() {
            const author = document.getElementById('authorInput').value.trim();
            const content = document.getElementById('contentInput').value.trim();
            
            if (!author || !content) {
                alert('请填写完整信息');
                return;
            }
            
            const res = await fetch('/api/comments', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ author, content })
            });
            
            if (res.ok) {
                document.getElementById('authorInput').value = '';
                document.getElementById('contentInput').value = '';
                fetchComments(); // 刷新列表
            } else {
                alert('提交失败');
            }
        }

        // 渲染评论及回复
        function renderComments(comments) {
            const container = document.getElementById('commentList');
            container.innerHTML = '';
            
            comments.forEach(comment => {
                const commentDiv = document.createElement('div');
                commentDiv.className = 'comment';
                commentDiv.innerHTML = `
                    <div class="comment-header">
                        <span><strong>${comment.author}</strong></span>
                        <small>${new Date(comment.timestamp).toLocaleString()}</small>
                    </div>
                    <p>${comment.content}</p>
                    <!-- 回复表单 -->
                    <div class="reply-form">
                        <input type="text" id="replyAuthor-${comment.id}" placeholder="回复者" style="width: 150px;">
                        <input type="text" id="replyContent-${comment.id}" placeholder="回复内容" style="flex-grow: 1; margin-left: 10px;">
                        <button onclick="submitReply('${comment.id}')">回复</button>
                    </div>
                    <!-- 回复列表 -->
                    <div id="replies-${comment.id}" class="replies"></div>
                `;
                container.appendChild(commentDiv);
                
                // 加载该评论的回复
                fetchReplies(comment.id);
            });
        }

        // 获取某条评论的回复
        async function fetchReplies(parentId) {
            const res = await fetch(`/api/comments/${parentId}/replies`);
            const replies = await res.json();
            const repliesContainer = document.getElementById(`replies-${parentId}`);
            repliesContainer.innerHTML = '';
            
            replies.forEach(reply => {
                const replyDiv = document.createElement('div');
                replyDiv.className = 'reply';
                replyDiv.innerHTML = `
                    <div class="comment-header">
                        <span><strong>${reply.author}</strong></span>
                        <small>${new Date(reply.timestamp).toLocaleString()}</small>
                    </div>
                    <p>${reply.content}</p>
                `;
                repliesContainer.appendChild(replyDiv);
            });
        }

        // 提交回复
        async function submitReply(parentId) {
            const author = document.getElementById(`replyAuthor-${parentId}`).value.trim();
            const content = document.getElementById(`replyContent-${parentId}`).value.trim();
            
            if (!author || !content) {
                alert('请填写完整信息');
                return;
            }
            
            const res = await fetch(`/api/comments/${parentId}/replies`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ author, content })
            });
            
            if (res.ok) {
                document.getElementById(`replyAuthor-${parentId}`).value = '';
                document.getElementById(`replyContent-${parentId}`).value = '';
                fetchReplies(parentId); // 刷新回复列表
            } else {
                alert('回复失败');
            }
        }
    </script>
</body>
</html>
